<template>
  <Transition
  enter-active-class="animate__animated animate__fadeInDownBig"
  leave-active-class="animate__animated animate__fadeOutDownBig">
    <div class="box2" v-if="isShow2"></div>
  </Transition>
  <button @click="isShow2 = !isShow2">移形换景</button>

  <Transition name="active">
    <div class="box" v-if="isShow"></div>
  </Transition>
  <button @click="isShow = !isShow">移形换影</button>

  <ul>
    <TransitionGroup name="active">
    <li v-for="(item, index) in lists" :key="item">
      {{item}}
      <span @click="del(index)">×</span>
    </li>
    </TransitionGroup>
    <button @click="addList">添加铠甲</button>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const isShow = ref(true)
const isShow2 = ref(true)
const lists = ref(['刑天','飞影','金刚'])
const del = (index) => {
  lists.value.splice(index, 1)
}
const addList = () => {
  lists.value.push('修罗')
}
</script>

<style lang="scss" scoped>

.box {
  height: 200px;
  width: 200px;
  background-color: skyblue;
}

.box2 {
  height: 200px;
  width: 200px;
  background-color: black;
}

ul{
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  margin: 20px 0;
  padding: 10px;
  background-color: #eee;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.active-enter-active ,
.active-leave-active {
  transition: all 1s ease;
}

.active-enter-from,
.active-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}

.active-enter-to,
.active-leave-from {
  opacity: 1;
  transform: translateY(0);
}
</style>